<?php include 'header.php'; ?>
<script>
function move(event) {
	var mouseX = event.pageX - this.offsetLeft;
	var mouseY = event.pageY - this.offsetTop;

	var x = mouseX - 400;
	var y = 300 - mouseY;

	var angle = Math.atan(y / x) * 180 / 3.1416;

	if (x > 0) {
		if (angle < -65)
			move1(0, 1);
		else
		if (angle < -25)
			move1(1, 1)
		else
		if (angle < 25)
			move1(1, 0);
		else
		if (angle < 65)
			move1(1, -1);
		else
			move1(0, -1);
	}
	else {
		if (angle < -65)
			move1(0, -1);
		else
		if (angle < -25)
			move1(-1, -1)
		else
		if (angle < 25)
			move1(-1, 0);
		else
		if (angle < 65)
			move1(-1, 1);
		else
			move1(0, 1);
	}
}

function move1(dx, dy) {
	var yourSprite = $(".you-sprite");

	$(".relative-position-sprite").animate({'left' : "-=" + dx * 50 + "px", 'top' : "-=" + dy * 50 + "px"}, {
		complete: function() {
			if (yourSprite.position().left + yourSprite.width() > $(this).position().left
					&& yourSprite.position().left < $(this).position().left + $(this).width()
					&& yourSprite.position().top + yourSprite.height() > $(this).position().top
					&& yourSprite.position().top < $(this).position().top + $(this).height()) {
				alert("en rango");
			}
		
			if ($(this).position().left < 0) {
				//$(this).css("left", "0px");
			}
		
			if ($(this).position().left < 0 || $(this).position().left + $(this).width() > 800
					|| $(this).position().top < 0 || $(this).position().top + $(this).height() > 600) {
				//$(this).hide();
			}
			else {
				$(this).show();
				if ($(this).position().left < 0 || $(this).position().left + $(this).width() > 800
						|| $(this).position().top < 0 || $(this).position().top + $(this).height() > 600) {
					//$(this).hide();
				}
			}
		},
		
		step: function(now, fx) {
			if (fx.prop == "left" && now < 0) {
				//$(this).css("left", "0px");
				//alert($(this));
			}
		}
	});
}
</script>
<form>
<div class="mapCanvas" style="width:800px; height:600px; margin:auto; position:relative">
<div style="width:750px; height:500px; left:25px; top:50px; position:absolute; background-image:url('/lobd/img/forest2.jpg')"></div>

<div style="width:200px; height:200px; left:300px; top:100px; position:absolute; background-image:url('/lobd/img/wolf.jpg')"></div>
<div style="width:200px; height:10px; left:300px; top:300px; position:absolute; background-color:red;">
	<div style="width:73px; height:10px; background-color:green;"><!----></div>
</div>

<input type="image" name="attack" value="sarasa" src="/lobd/img/sword-button.png" style="left:115px; top:400px; position:absolute;" title="chau"  />
<div style="width:80px; height:80px; left:215px; top:400px; position:absolute; background-image:url('/lobd/img/button.png')"></div>
<div style="width:80px; height:80px; left:315px; top:400px; position:absolute; background-image:url('/lobd/img/button.png')"></div>

<div style="width:80px; height:80px; left:415px; top:400px; position:absolute; background-image:url('/lobd/img/button.png')"></div>
<div style="width:80px; height:80px; left:515px; top:400px; position:absolute; background-image:url('/lobd/img/button.png')"></div>
<div style="width:80px; height:80px; left:615px; top:400px; position:absolute; background-image:url('/lobd/img/button.png')"></div>
</div>
</form>

<script>
	$('.mapCanvas').click(move);
</script>

<?php include 'footer.php'; ?>
